<template>
  <div class="f-login-container">
    <div class="f-language-selector">
      <!-- <el-select style="width: 90px" size="small" v-model="selectedLanguage" @change="changeLanguage">
        <el-option v-for="item in languageOptions" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select> -->
      <el-button style="width: 70px;margin-left: 10px;" size="small" round @click="signIn">{{
        $t("login.signIn")
        }}</el-button>
      <el-button style="width: 70px" size="small" round @click="register">{{
        $t("login.register")
        }}</el-button>
    </div>
    <el-card class="f-login-card">
      <div>
        <div class="f-login-title">{{ $t("login.title") }}</div>
      </div>
      <div>
        <div class="f-login-text">{{ $t("login.forgotPassword") }}</div>
      </div>
      <div>
        <div style="color: #909399;margin-bottom: 45px;">
          {{ $t("login.forgotTip") }}
        </div>
      </div>
      <el-row>
        <el-col>
          <el-input maxlength="50" show-word-limit autofocus="true" v-model="form.account" clearable
            :placeholder="$t('login.emailPlaceholder')" style="margin-bottom: 35px;"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button :loading="loginLoading" @click="handleForgot"
            style="background-color: #febc1c; color: black; width: 100%;font-weight:bold;">{{ $t("login.sendCode")
            }}</el-button>
        </el-col>
      </el-row>
      <div class="f-login-bottom-text">
        <span>{{ $t("login.rememberPassword") }}</span>
        <router-link class="f-common-link" to="/login">{{ $t('login.loginText') }}</router-link>
      </div>
    </el-card>
  </div>
</template>

<script>

import { sendVerifyCode } from "../../api/userService";

export default {
  data() {
    return {
      form: {
        account: '',
      },
      selectedLanguage: 'en',
      languageOptions: [
        { value: 'en', label: 'English' },
        { value: 'zh', label: '中文' }
      ],
      loginLoading: false
    }
  },
  methods: {
    async handleForgot() {
      if (this.form.account === '' || this.form.account === null) {
        this.$message.error(this.$t('login.emailRequired'))
        return;
      }
      if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.form.account) == false) {
        this.$message.error(this.$t('login.emailCheck'));
        return;
      }
      this.loginLoading = true
      await sendVerifyCode(this.form.account, 'forgot').then(res => {
        if (res.code == 200) {
          this.$message.success(this.$t('login.sendSuccess'))
          setTimeout(() => {
            this.$router.push({
              name: 'verification',
              query: {
                email: this.form.account
              }
            });
          }, 1000)
        } else {
          this.loginLoading = false;
          this.$message.error(res.msg);
        }
      });
      this.loginLoading = false
    },
    changeLanguage(e) {
      this.$nextTick(() => {
        localStorage.setItem('lang', e);
        this.$i18n.locale = e;
      })
    },
    register(e) {
      this.$router.push("/register");
    },
    signIn() {
      this.$router.push("/login");
    }
  },
  mounted() {
    // 页面刷新后默认语言为英语
    localStorage.removeItem('lang');
    localStorage.setItem('lang', 'en');
  }
}
</script>

<style scoped>

::v-deep .select-popper .el-input__inner {
  border-radius: 15px;
}
::v-deep .el-input__placeholder {
  text-align: center;
}

@import "../../assets/css/ForgotPassword.css";

@media (max-width: 600px) {
  .el-form {
    width: 100%;
  }
}
</style>
